<template>
    <main>
        <div class="box" v-for="index in pageContent" :key="index.id">
            <div>
                <h3>
                    {{ index.name }}
                </h3>
            </div>

            <p>
                <span>任务内容：</span>
                <br>
                <div style="white-space: pre-wrap" >
                    <n-scrollbar style="max-height: 340px; padding-right: 10px;" trigger="none">
                        {{ index['task_describe'] }}
                    </n-scrollbar>
                </div>

            </p>
            <p>
                <span>任务资源：</span>
                <br>
                <n-scrollbar style="max-height: 50px">
                <span v-for="(aindex) in index.children">
                    <a :href="aindex.url" target="_blank" download>
                      {{ aindex.name }}
                    </a>
                    <span>&nbsp;</span><span>&nbsp;</span>
                </span>
                </n-scrollbar>
            </p>
            <n-button @click="toAnalysis(index.id)"> 分析任务</n-button>
        </div>
        <n-pagination v-model:page="page" :page-count="Math.ceil(tasks.length / 3)" size="large"/>
    </main>
</template>

<script setup>
import workApi from "@/http/workApi";
import {useRoute} from "vue-router";
import {useStudentStore} from "@/stores/student";
import router from "@/router";
import {useElementsStore} from "@/stores/elements";

const student = useStudentStore()
const route = useRoute()
const elements = useElementsStore()
student.setMenuValue(route.name)


let tasks = ref([])
workApi.get('student/task', {
    params: {
        id: route.query.projectId
    }
}).then((res) => {
    tasks.value = res.data
})
const toAnalysis = (id) => {
    router.push({
        name: 'Analysis',
        query: {
            ...route.query,
            taskId: id
        }
    })
    student.setMenuValue("Analysis", false)
    elements.updateElements(route.query.projectId, id, true);
}
const page = ref(1)
const pageContent = computed(() => {
    let began = (page.value - 1) * 3
    return tasks.value.slice(began, began + 3)
})
</script>

<style scoped lang="less">
main {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 90vh;
    box-sizing: border-box;
    padding: 3vh 6vw;

    > .box {
        position: relative;
        width: 20vw;
        height: 55vh;
        box-sizing: border-box;
        margin: 3% 3%;
        padding: 0 2%;
        border: 1px solid;

        h3 {
            margin-bottom: 5px;
        }

        p {
            margin-bottom: 10px;
        }

        .n-button {
            position: relative;
            right: -50%;
            bottom: 10px;
            transform: translate(-50%, 0);
            width: 200px;
            height: 40px;
        }

        a {
            color: #01A7F0;
            text-decoration: none;
            border-bottom: 1px solid #01A7F0;
        }

        a:active {
            color: #01A7F0;
        }
    }

    .n-pagination {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%);
    }
}

.box {
    display: flex;
    flex-direction: column;

    > h3 {
        flex: 1;
    }

    > p:nth-child(2) {
        flex: 9;
    }

    > p:nth-child(3) {
        flex: 2;
    }
}
</style>